<template>
  <div id="myDiv">
    <!-- 3、使用组件 -->
    <VueEditor v-model="content"></VueEditor>
    <el-button type="primary" @click="detail" >查看</el-button>
  </div>
</template>

<!--富文本就是把资源全部转成html格式，
  WangEditor 提供两种存储图片等文件的方式：
   第一种：转成base64格式，解码简单，但是文本内容多的时候，存储在数据库有压力，体验不好
   第二种：图片存储在云服务器，分担服务器的负载，数据库只需要存储url等信息，减小数据库压力
-->
<script>
// 1、引用包
import {VueEditor} from "vue2-editor";

export default {
  // 2、添加组件
  components: {
    VueEditor
  },
  data() {
    return {
      content: "<h1>这儿是<span style = 'color:blue'>内容</span></h1>"
    };
  },
  methods: {
    detail() {
      console.log(this.content)
    }
  }
};
</script>
<style scoped>
#myDiv{
  width:90%;
  height:700px;
  margin:0 auto;
}
.el-button{
  margin-top:20px;
}
</style>
